<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姚德秋">
    <title>唯品会</title>
    <link rel="stylesheet" href="weipinhui.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <!-- 头部导航 -->
        <nav class="top">
            <ul class="top-left">
                <li>河南<span></span></li>
                <section>
                    <h3>请选择所在收货地区</h3>
                    <p>A 安徽 澳门</p>
                    <p>B 北京</p>
                    <p>C 重庆</p>
                    <p>F 福建</p>
                    <p>G 广东 广西 贵州 甘肃</p>
                    <p>H 河北 <span>河南</span> 黑龙江 海南 湖北 湖南</p>
                    <p>J 江苏 吉林 江西</p>
                    <p>L 辽宁</p>
                    <p>N 内蒙古 宁夏</p>
                    <p>Q 青海</p>
                    <p>S 上海 山东 山西 四川 陕西</p>
                    <p>T 台湾 天津</p>
                    <p>X 西藏 香港 新疆</p>
                    <p>Y 云南</p>
                    <p>Z 浙江</p>
                </section>
            </ul>
            <ul class="top-right">
                <li class="frist-li">请登录
                    <section class="frist-sec">
                        <div class="sec-top">
                            <span></span>
                            <p>你好！ [请登录]</p>
                        </div>
                        <div class="sec-bot">
                            <span>我的收藏</span>
                            <span>我的订单</span>
                            <span>零钱</span>
                            <span>我的优惠券</span>
                            <span>我的唯品币</span>
                            <span>唯品金融</span>
                        </div>
                    </section>
                </li>

                <li>注册</li>
                <li class="last-li"><span class="span1"></span>签到有礼
                    <section class="last-sec">
                        <div class="biankuang">
                            <div class="xian"></div>
                            <div>
                                <section></section>
                            </div>
                            <div>
                                <section></section>
                            </div>
                            <div>
                                <section></section>
                            </div>
                            <div>
                                <section></section>
                            </div>
                            <div>
                                <section></section>
                            </div>
                            <div>
                                <section></section>
                            </div>
                            <div>
                                <section></section>
                            </div>
                        </div>
                        <a href="#">每天签到送惊喜，连续签到更享心动奖励</a>
                        <button type="button">签到</button>
                    </section>
                </li>
                <li>我的订单</li>
                <li class="supershopping">我的特卖<span></span>
                    <section class="listsec">
                        <p>品牌收藏(0)</p>
                        <p>商品收藏(0)</p>
                        <p>我的足迹(0)</p>
                    </section>
                </li>
                <li class="cup">会员俱乐部<span></span>
                    <section class="lissec">
                        <p>俱乐部首页</p>
                        <p>唯品币兑换</p>
                        <p>免费抽大奖</p>
                    </section>
                </li>
                <li class="kehu">客户服务<span></span>
                    <section class="lisec">
                        <p>俱乐部首页</p>
                        <p>唯品币兑换</p>
                        <p>免费抽大奖</p>
                        <p>免费抽大奖</p>
                    </section>
                </li>
                <li class="shouji"><span></span>手机版
                    <section class="shoujik">
                        <img src="qr.jpg" alt="">
                        <p>随时购，放心抢</p>
                    </section>
                </li>
                <li class="gengduo">更多<span></span>
                    <section class="liec">
                        <h4>合作专区</h4>
                        <p>联名卡申请 唯品卡 支付专区</p>
                        <h4>合作专区</h4>
                        <p>联名卡申请 唯品卡 支付专区</p>
                    </section>
                </li>
            </ul>
        </nav>
    </div>
    <div class="logo-img">
        <div class="left-img">
            <img src="logo.png" alt="">
        </div>
        <div class="right-img">
            <span class="frist-img"></span>
            <span class="next-img"></span>
            <span class="last-img"></span>
            <span class="right">
            <span class="list-span"></span>
            <span class="jiuyongsp">0</span>
            <span class="gouwu">我的购物袋</span>
            <section class="right-section">
                <span>好像还未登陆，</span>
                <span><a href="#">点击登录</a></span>
            </section>
            </span>
        </div>
    </div>

    <nav class="pink">
        <div class="container">
            <ul class="left1-list">
                <li style="background-color:#bd1067;">首页</li>
                <li>唯品国际</li>
                <li>母婴</li>
                <li>家居家电</li>
                <li>男士</li>
                <li>美妆</li>
                <li>生活超市</li>
                <li>金融</li>
                <li class="most">更多<span></span>
                    <section class="most-logo">
                        <div>
                            <img src="more01.jpg" alt="">
                            <div class="corver"></div>
                            <div class="corver-info">女装</div>
                        </div>
                        <div> <img src="more02.jpg" alt="">
                            <div class="corver"></div>
                            <div class="corver-info">女装</div>
                        </div>
                        <div> <img src="more03.jpg" alt="">
                            <div class="corver"></div>
                            <div class="corver-info">女装</div>
                        </div>
                        <div>
                            <img src="more04.jpg" alt="">
                            <div id="hou" class="corver"></div>
                            <div id="houu" class="corver-info">女装</div>
                        </div>
                        <div>
                            <img src="more05.jpg" alt="">
                            <div id="hou" class="corver"></div>
                            <div id="houu" class="corver-info">女装</div>
                        </div>
                    </section>
                </li>
            </ul>
            <ul class="right1-list">
                <li><span class="fenlei"></span><a href="#">分类</a></li>
                <li><span class="yugao"></span><a href="#">预告</a></li>
            </ul>
        </div>
    </nav>
    <main>
        <div.lunbo-bg>
            <div class="lunbotu container">
                <div class="lunbo">
                    <ul>
                        <li class="current"><img src="lunbo01.jpg" alt=""></li>
                        <li><img src="lunbo02.jpg" alt=""></li>
                        <li> <img src="lunbo03.jpg" alt=""></li>
                        <li> <img src="lunbo04.jpg" alt=""></li>
                    </ul>
                </div>
                <div class="lunbo-foot">
                    <div class="active"><a href="#">净水节 最高500元红包</a></div>
                    <div><a href="#">时尚风暴 最高满199减40</a></div>
                    <div><a href="#">居家放福利 跨专场3件8折</a></div>
                    <div><a href="#">安莉芳集团 跨专场3件8折</a></div>
                </div>
                <div class="jiantou">
                    <div class="left2"></div>
                    <div class="last2"></div>
                </div>
            </div>
            </div>
            <div class="container topimg">
                <ul>
                    <li><img src="top01.jpg" alt="">
                    <div class="small1"></div></li>
                    <li><img src="top02.jpg" alt="">
                    <div class="small2"></div></li>
                    <li><img src="top03.jpg" alt="">
                    <div class="small3"></div></li>
                </ul>
            </div>
            <div class="title-v2 container">
                <img src="title_v2.jpg" alt="">
            </div>
            </div>

            <div class="guding">
                <div class="guding-top">
               <div class="zhanghao">
                   <span></span>
                   <a href="#">账号</a>
                   <section class="sec-zh">
                       <div class="x">x</div>
                       <div class="img"></div>
                       <!-- <div class="write"></div> -->
                       <span class="xxx"></span>
                       <div><a id="huiyuan" href="#">会员俱乐部</a></div>
                   </section>
               </div>
               <div class="gouwudai">
                   <span></span>
                   <a href="#">购</a>
                   <a href="#">物</a>
                   <a href="#">袋</a>
                   <section>0</section>
               </div>
               <div class="img1">
                   <div class="div1">优惠券</div>
               </div>
               <div class="img2">
                   <div class="div2">品牌收藏</div>
               </div>
               <div class="img3">
                   <div class="div3">我的商品</div>
               </div>
               <div class="img4">
                    <div class="div4">我的足迹</div>
               </div>
             </div>
             <div class="guding-bot">  
               <div class="img5">
                   <div class="div5">会员反馈</div>
               </div>
               <div class="img6">
                   <div class="div6">返回顶部</div>
               </div>
             </div>
            </div>
    </main>

</body>

</html>
<script>
    var lunbotu = document.querySelector(' .lunbotu')
    var imgs = document.querySelectorAll(" .lunbo li");
    var left = document.querySelector(" .left2");
    var last = document.querySelector(" .last2");
    var divs = document.querySelectorAll(" .lunbo-foot>div");

    function showImg() {
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].className = '';
            divs[i].className = '';
        }
        imgs[index].className = 'current';
        divs[index].className = 'active';
    }
    var index = 0;
    function leftImg() {
        index = index == 0 ? index = imgs.length - 1 : index - 1;
        showImg();
    }
    function lastImg() {
        index = index == imgs.length - 1 ? 0 : index + 1;
        showImg();
    }

    var timer = setInterval(lastImg, 2000);

    for (var i = 0; i < divs.length; i++) {
        divs[i].index = i;
        divs[i].onmouseover = function () {
            clearInterval(timer);
            timer = null;
            index = this.index;
            showImg();
        }
        divs[i].onmouseout = function () {
            if (timer) return;
            timer = setInterval(lastImg, 2000);
        }
    }
    lunbotu.onmouseover = function () {
        clearInterval(timer);
        timer = null;
        left.style.display = 'block';
        last.style.display = 'block';
    }
    lunbotu.onmouseout = function () {
        if (timer) return;
        timer = setInterval(lastImg, 2000);
        left.style.display = 'none';
        last.style.display = 'none';
    }
    left.onclick = function () {
        leftImg();
    }
    last.onclick = function () {
        lastImg();
    }

</script>